<!DOCTYPE html>
<html>
<head>
  <title>弹窗示例</title>

<style>
  select {
    color: gray; /* 设置默认文案的颜色为灰色 */
  }

  select option:not(:checked) {
    color: black; /* 设置非选中项的字体颜色为黑色 */
  }
</style>

<select>
  <option value="" disabled selected hidden style="color: gray;">请选择一个选项</option>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>
  <script>
    function changeDefaultOptionColor(selectElement) {
      var options = selectElement.options;
      var defaultOption = options[0];
  
      if (defaultOption.selected) {
        defaultOption.style.color = 'gray'; // 设置默认选项的字体颜色为灰色
      } else {
        defaultOption.style.color = 'black'; // 设置其他选项的字体颜色为黑色
      }
    }
  </script>
</html>

